<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/fonts/font-awesome.css">
    <!-- 引入在线icon的css-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3019949_apjq287p52.css">
    <!-- 引入js -->
    <script src="./js/index.js"></script>
    <!-- 网页logo -->
    <link rel="shortcut icon" href="./img/wylogo.png">

</head>

<body>
<!-- 顶部导航条 -->
<nav id="top_nav">
    <ul id="nav_left">
        <li>
            <div id="xian1">
                <span>中国大陆</span>
                <i class="fa fa-arrow-down"></i>
                <div id="hidden1">
                    <ul id="hidden_ul">
                        <li><a href="#">全球</a></li>
                        <li><a href="#">中国大陆</a></li>
                        <li><a href="#">中国香港</a></li>
                        <li><a href="#">中国台湾</a></li>
                        <li><a href="#">中国澳门</a></li>
                        <li><a href="#">韩国</a></li>
                        <li><a href="#">马来西亚</a></li>
                        <li><a href="#">日本</a></li>
                        <li><a href="#">澳大利亚</a></li>
                        <li><a href="#">新西兰</a></li>
                        <li><a href="#">加拿大</a></li>
                        <li><a href="#">越南</a></li>
                        <li><a href="#">泰国</a></li>
                        <li><a href="#">菲律宾</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_left">
            <a href="login.html" style="color: red;">亲，请登录</a>
        </li>
        <li class="li_left">
            <a href="register.html">免费注册</a>
        </li>
        <li class="li_left">
            <a href="#">手机逛淘宝</a>
        </li>
    </ul>
    <ul id="nav_right">
        <li id="wdtb">
            <a href="login.html">
                我的淘宝
                <i class="fa fa-arrow-down"></i>
                <div id="hidden2">
                    <a href="login.html">已买到的宝贝</a>
                    <a href="login.html">我的足迹</a>

                </div>
            </a>
        </li>
        <li>
            <a href="login.html" style="color: red;">
                <i class="fa fa-shopping-cart"></i>
                购物车
            </a>
        </li>
        <li id="scj">
            <a href="login.html">
                <i class="fa fa-star"></i>
                收藏夹
                <i class="fa fa-arrow-down"></i>
                <div id="hidden3">
                    <a href="login.html">收藏的宝贝</a>
                    <a href="login.html">收藏的店铺</a>
                </div>
            </a>
        </li>
        <li>
            <a href="login.html">
                商品分类
            </a>
        </li>
        <li id="mjzx">
            <a href="login.html">
                千牛卖家中心
                <i class="fa fa-arrow-down"></i>
            </a>
        </li>
        <li id="lxkf">
            <a href="service.html">
                联系客服
                <i class="fa fa-arrow-down"></i>
            </a>
        </li>
    </ul>

</nav>


<!-- header 头部部分-->
<header id="header">
    <div id="header_all">
        <img src="./img/logo.png" alt="">
        <form action="#">
            <input type="text" name="search" id="search">
            <span class="search_baby">
                    <i class="fa fa-search"></i>
                    搜索宝贝
                </span>
            <button id="btn_search">搜索</button>
        </form>
        <div id="search_info">
            <ul>
                <li><a href="#">新款连衣裙</a></li>
                <li><a href="#">四件套</a></li>
                <li><a href="#" style="color: red;">潮流T恤</a></li>
                <li><a href="#">时尚女鞋</a></li>
                <li><a href="#">短裤</a></li>
                <li><a href="#">半身裙</a></li>
                <li><a href="#">男士外套</a></li>
                <li><a href="#">墙纸</a></li>
                <li><a href="#">行车记录仪</a></li>
                <li><a href="#">新款男鞋</a></li>
                <li><a href="#">耳机</a></li>
                <li><a href="#">时尚女包</a></li>
                <li><a href="#">沙发</a></li>
            </ul>
        </div>
        <div id="er">
            <span>下载淘宝</span>
            <img src="./img/ewm.png" alt="二维码">
        </div>
    </div>

</header>


<!-- main 主题部分 -->
<main id="main">
    <section id="section_top">
        <div id="top">
            <h2 style="width:190px; height: 30px;">主题市场</h2>
            <ul>
                <li class="info"><a href="./miindex.html" style="color: #FF0036;"> <strong>小米</strong> </a></li>
                <li class="info"><a href="#" style="color: #FF0036;"> <strong>聚划算</strong> </a></li>
                <li class="info"><a href="#" style="color: #33c900;"> <strong>天猫超市</strong> </a></li>
                <li class="line">|</li>
                <li><a href="#">司法拍卖</a></li>
                <li><a href="#">飞猪旅行</a></li>
                <li><a href="#">天天特卖</a></li>
                <li class="line">|</li>
                <li><a href="#">选点新货</a></li>
                <li><a href="#">苏宁易购</a></li>
                <li><a href="#">淘宝心选</a></li>
                <li><a href="#">智能生活</a></li>
            </ul>
        </div>
    </section>
    <section id="section_center">
        <div id="center_left">
            <ul>
                <li>
                    <i class="iconfont icon-qunzi"></i>
                    <a href="./product_category.html">女装 &nbsp;/</a>
                    <a href="./product_category.html">内衣 &nbsp;/</a>
                    <a href="./product_category.html">家居</a>
                </li>
                <li>
                    <i class="iconfont icon-xiezi"></i>
                    <a href="#">女鞋 &nbsp;/</a>
                    <a href="#">男鞋 &nbsp;/</a>
                    <a href="#">箱包</a>
                </li>
                <li>
                    <i class="iconfont icon-yazi"></i>
                    <a href="#">母婴 &nbsp;/</a>
                    <a href="#">童装 &nbsp;/</a>
                    <a href="#">玩具</a>
                </li>
                <li>
                    <i class="iconfont icon-chenshan"></i>
                    <a href="#">男装 &nbsp;/</a>
                    <a href="#">运动户外</a>
                </li>
                <li>
                    <i class="iconfont icon-meizhuang"></i>
                    <a href="#">美妆 &nbsp;/</a>
                    <a href="#">彩妆 &nbsp;/</a>
                    <a href="#">个护</a>
                </li>
                <li>
                    <i class="iconfont icon-shouji"></i>
                    <a href="#">手机 &nbsp;/</a>
                    <a href="#">数码 &nbsp;/</a>
                    <a href="#">企业</a>
                </li>
                <li>
                    <i class="iconfont icon-xiyiji"></i>
                    <a href="#">大家电 &nbsp;/</a>
                    <a href="#">生活电器 &nbsp;/</a>
                </li>
                <li>
                    <i class="iconfont icon-lingshi"></i>
                    <a href="#">零食 &nbsp;/</a>
                    <a href="#">生鲜 &nbsp;/</a>
                    <a href="#">茶酒</a>
                </li>
                <li>
                    <i class="iconfont icon-dianfanbao"></i>
                    <a href="#">厨具 &nbsp;/</a>
                    <a href="#">收纳 &nbsp;/</a>
                    <a href="#">清洁</a>
                </li>
                <li>
                    <i class="iconfont icon-shafa"></i>
                    <a href="#">家纺 &nbsp;/</a>
                    <a href="#">鲜花</a>
                </li>
                <li>
                    <i class="iconfont icon-shu"></i>
                    <a href="#">图书音像 &nbsp;/</a>
                    <a href="#">文具</a>
                </li>
                <li>
                    <i class="iconfont icon-yiyaoxiang"></i>
                    <a href="#">医药保健 &nbsp;/</a>
                    <a href="#">进口</a>
                </li>
                <li>
                    <i class="iconfont icon-qiche"></i>
                    <a href="#">汽车 &nbsp;/</a>
                    <a href="#">二手车 &nbsp;/</a>
                    <a href="#">用品</a>
                </li>
                <li>
                    <i class="iconfont icon-chengshi"></i>
                    <a href="#">房产 &nbsp;/</a>
                    <a href="#">装修家居 &nbsp;/</a>
                    <a href="#">建材</a>
                </li>
                <li>
                    <i class="iconfont icon-shoubiao"></i>
                    <a href="#">手表 &nbsp;/</a>
                    <a href="#">眼镜 &nbsp;/</a>
                    <a href="#">珠宝饰品</a>
                </li>
            </ul>
        </div>
        <div id="center_center">
            <div id="lun1">
                <ul id="imglist">
                    <li><a href="#"><img src="./img/pic1.jpg"></a></li>
                    <li><a href="#"><img src="./img/pic2.jpg"></a></li>
                    <li><a href="#"><img src="./img/pic3.jpg"></a></li>
                    <li><a href="#"><img src="./img/pic4.jpg"></a></li>
                    <li><a href="#"><img src="./img/pic5.jpg"></a></li>
                    <li><a href="#"><img src="./img/pic1.jpg"></a></li>
                </ul>
                <ul id="arrow">
                    <li><i class="iconfont icon-anniu_jiantouxiangzuo"></i></li>
                    <li><i class="iconfont icon-anniu-jiantouxiangyou"></i></li>
                </ul>


            </div>
            <div id="lun2">
                <ul id="imglist2">
                    <li class="lun2_li">
                        <div class="lun2_pic">
                            <a href="javascript:;">
                                <img src="./img/lun1.jpg">
                            </a>
                            <a href="javascript:;">
                                <img src="./img/lun2.jpg">
                            </a>
                        </div>

                    </li>
                    <li>
                        <div>
                            <a href="javascript:;">
                                <img src="./img/lun3.jpg">
                            </a>
                            <a href="javascript:;">
                                <img src="./img/lun4.jpg">
                            </a>
                        </div>

                    </li>
                    <li>
                        <div>
                            <a href="javascript:;">
                                <img src="./img/lun5.jpg">
                            </a>
                            <a href="javascript:;">
                                <img src="./img/lun6.jpg">
                            </a>
                        </div>

                    </li>

                </ul>
                <ul id="arrow2">
                    <li><i class="iconfont icon-anniu_jiantouxiangzuo"></i></li>
                    <li><i class="iconfont icon-anniu-jiantouxiangyou"></i></li>
                </ul>
            </div>
        </div>
        <div id="center_right">
            <div id="center_contain">
                <div id="con1">
                    <img src="./img/tx.jpg">
                    <div>Hi!你好</div>
                </div>
                <div id="con2">
                    <button class="btn btn1"><a href="login.html">登录</a></button>
                    <button class="btn btn2"><a href="register.html">注册</a></button>
                    <button class="btn btn3"><a href="#">开店</a></button>
                </div>
                <div id="con3">
                    <img src="./img/center_right.png">
                </div>
                <div id="con4">
                    <div id="con_info1">
                        <span><strong>公告</strong></span>
                        <span>新鲜事儿都在这里~</span>
                    </div>
                    <div class="con_info2">
                        <span class="title">规则</span>
                        <span class="subscript">2021年淘宝12.12招商规则</span>
                    </div>
                    <div class="con_info2">
                        <span class="title">热点</span>
                        <span class="subscript">关于推进“清朗”账号乱象专项整治的通知</span>
                    </div>
                    <div class="con_info2">
                        <span class="title">热点</span>
                        <span class="subscript">《淘宝平台违禁信息管理规则》规则变更通知</span>
                    </div>

                </div>
                <div id="con5">
                    <ul>
                        <li class="first_li">
                            <a href="#">
                                <i class="iconfont icon-shoucang"></i>
                                <div>收藏夹</div>
                            </a>
                        </li>
                        <li class="second">
                            <a href="#">
                                <i class="iconfont icon-xiexiangbao"></i>
                                <div>买过的店铺</div>
                            </a>
                        </li>
                        <li class="second">
                            <a href="#">
                                <i class="iconfont icon-31dianpu"></i>
                                <div>收藏的店铺</div>
                            </a>
                        </li>
                        <li class="second">
                            <a href="#">
                                <i class="iconfont icon-shizhong"></i>
                                <div>我的足迹</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section id="section_bottom">
        <div id="bottom_sp">
            <p>
                <span>猜你喜欢</span>
                <img src="./img/spl.png">
            </p>
            <div id="one">
                <ul>
                    <li>

                        <a href="./product_category.html">
                            <div class="img-wrap">
                                <img src="./img/img1.png">

                            </div>
                            <h4>骨瓷超大早餐杯麦片杯牛奶杯水杯陶瓷创意杯子大容量马克杯</h4>

                            <p class="price" style="color:#F40;">￥28.8</p>
                        </a>

                    </li>
                    <li>
                        <a href="./product_category.html">
                            <div class="img-wrap">
                                <img src="./img/img2.png">
                            </div>
                            <h4>正品迪士尼米奇苏格兰风格双层饭盒可微波炉加热大容量便当盒 2L</h4>
                        </a>
                        <p class="price" style="color:#F40;">￥38.8</p>
                    </li>
                    <li>
                        <a href="./product_category.html">
                            <div class="img-wrap">
                                <img src="./img/img3.png">
                            </div>
                            <h4>日式厚蛋烧玉子烧锅不粘锅千层锅鸡蛋卷锅平底锅煎蛋小迷你煎锅 2L</h4>
                        </a>
                        <p class="price" style="color:#F40;">￥12.9</p>
                    </li>
                    <li>
                        <a href="./product_category.html">
                            <div class="img-wrap">
                                <img src="./img/img4.png">
                            </div>
                            <h4>纸巾盒客厅轻奢桌面抽纸盒北欧创意办公桌茶几遥控器收纳盒家用 2L</h4>
                        </a>
                        <p class="price" style="color:#F40;">￥59.9</p>
                    </li>
                    <li>
                        <a href="./product_category.html">
                            <div class="img-wrap">
                                <img src="./img/img5.png">
                            </div>
                            <h4>诚享捣蒜罐蒜臼子楠竹木家用捣蒜器石臼老式捣药罐蒜泥器儿童蒜罐 2L</h4>
                        </a>
                        <p class="price" style="color:#F40;">￥19.6</p>
                    </li>
                </ul>
            </div>
        </div>
        <div id="bottomIcon">
            <div class="bottom_icon">
                <div class="icon">
                    <i class="iconfont icon-dunpai"></i>
                    <div>消费者保障</div>
                </div>
                <div class="icon_info">
                    <a href="#">保障范围</a>&nbsp;&nbsp;
                    <a href="#">退货退款流程</a>&nbsp;&nbsp;
                    <a href="#">服务中心</a>
                    <a href="#">更多特色服务</a>
                </div>
            </div>
            <div class="bottom_icon">
                <div class="icon ">
                    <i class="iconfont icon-bangzhu"></i>
                    <div>新手上路</div>
                </div>
                <div class="icon_info">
                    <a href="#">新手专区</a>&nbsp;&nbsp;
                    <a href="#">消费警示</a>&nbsp;&nbsp;
                    <a href="#">交易安全</a>&nbsp;&nbsp;
                    <a href="#">24小时在线帮助</a>&nbsp;&nbsp;
                    <a href="#">免费开店</a>
                </div>
            </div>
            <div class="bottom_icon">
                <div class="icon">
                    <i class="iconfont icon-yifukuan"></i>
                    <div>付款方式</div>
                </div>
                <div class="icon_info">
                    <a href="#">快捷支付</a>&nbsp;&nbsp;
                    <a href="#">信用卡</a>&nbsp;&nbsp;
                    <a href="#">金额宝</a>&nbsp;&nbsp;
                    <a href="#">蚂蚁花呗</a>&nbsp;&nbsp;
                    <a href="#">货到付款</a>
                </div>
            </div>
            <div class="bottom_icon">
                <div class="icon ">
                    <i class="iconfont icon-taobaotese"></i>
                    <div>淘宝特色</div>
                </div>
                <div class="icon_info">
                    <a href="#">手机淘宝</a>&nbsp;&nbsp;
                    <a href="#">旺旺/旺信</a>&nbsp;&nbsp;
                    <a href="#">大众评审</a>&nbsp;&nbsp;

                </div>
            </div>
        </div>

    </section>
</main>

</body>

</html>